Box-sizing - 金魚都能懂的CSS必學屬性 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 28

Modern Web

金魚都能懂的CSS必學屬性系列第 28 篇

Box-sizing - 金魚都能懂的CSS必學屬性

12th鐵人賽 css教學 css 金魚都能懂網頁教學

CSScoke

2020-10-13 15:49:39

45137 瀏覽

分享至

Box-sizing 這個屬性是一個新時代的屬性，也是目前這時代網頁入門必備的一項常識，box-sizing 的作用是控制 width 與 height 作用的對象空間，換另一個說法，則是設定物件尺寸的計算方式，目前僅有兩種模式擇一使用，撰寫方式如同下面這樣

box-sizing: content-box;

box-sizing 可以使用的值不多，基本上就兩個

Content-box (寬高設定作用在內容範圍)
Border-box （寬高設定作用在邊框外緣的範圍內）

在預設的情況下， box-sizing 的預設值是 content-box。

內容盒子與邊框盒子

由於 box-sizing 可設定的值只有兩種，這時搞懂這兩個值的意義就顯得異常重要！如果你懶得看 Amos 的文字敘述，那你也可以選擇看免費的「金魚都能懂網頁設計入門 : 換個新盒子」影片教學。

content-box 其實不設定時就是預設

從一開始的敘述得知， box-sizing 的作用其實就是設定 width / height 的作用對象是哪個盒子(box) ，在不更改 box-sizing 的情況下，其實 width / height 的作用就是設定內容資料的範圍空間，我們就稱為 content-box，一個物件的範圍，其實就是四個層層包裹的矩形所構成，由內而外分別是「content-box(藍色)、padding-box(綠色)、border-box(橙黃)、margin-box(橙色)」，如下圖所示(圖片取自 Chrome DevTools)

倘若我們對一個物件設定 width: 200px; 那就表示我的物件內資料的可運用空間就是 200px，超過 200px 就會折到下一行，如同下方原始碼這般

HTML

<div class="fish">金魚都能懂一二三四五金魚都能懂六七八九十</div>

CSS

*{
    margin: 0;
    padding: 0;
}
.fish{
	width: 200px;
	height: 200px;
    font-size: 20px;
	background-color: #CCC;
}

呈現畫面

從上圖就能清楚的看到文字被強迫換行了，文字的字級 Amos 特別把它設定成 20px 大小，所以 10 個字就是 200px ，很明顯的該區塊的寬度的確是 200px，如果我們對該物件添加一個 padding 的話呢，像是下面這樣

*{
    margin: 0;
    padding: 0;
}
.fish{
	width: 200px;
	height: 200px;
	padding: 20px;
    font-size: 20px;
	background-color: #CCC;
}

呈現畫面

可以看到單行文字並沒有減少，依舊是 10 個字，也就表示 padding 是額外增加出來的空間，把剛剛的容器概念疊上去的話就可以很明顯的看出來 content-box 的範圍了

所以此時你所看到的物件寬度，實際是 width 的 200px 加上左右 padding 相加的 40px，最終呈現的就是 240px。

border-box 不用計算超方便

將 box-sizing 設定成 border-box 後， width / height 的作用範圍就是指到 border 這個 box 的範圍了，我們就稱為 border-box，從前面所寫的可以了解一個物件的範圍，是由四個層層包裹的矩形所構成，此時 width 所作用的 box 就是 border 這個範圍了，如下圖所示(圖片取自 Chrome DevTools)

所以我們如果設定了以下這樣的 CSS 原始碼的話，你所看到的物件寬度將會是 200px ，而不是之前所看到的 240px

*{
    margin: 0;
    padding: 0;
}
.fish{
	width: 200px;
	height: 200px;
    padding: 20px;
    font-size: 20px;
	background-color: #CCC;
    box-sizing: border-box;
}

呈現畫面

由上圖可以看到單行文字的數量變少了，只剩下 8 個字就折行了，從 1 個字寬 20px 來計算，8 * 20 = 160px，加上 padding 左右各 20px，就能得到目前顯示的結果是 200px，但因為目前沒有設定 border，所以無法看到添加 border 之後的尺寸，所以我們來添加一下 20px 的 border 看看會是怎樣的結果，原始碼如下

.fish{
	width: 200px;
	height: 200px;
	padding: 20px;
	border: 20px solid red;
	font-size: 20px;
	background-color: #CCC;
	box-sizing: border-box;
}

呈現畫面

可以看到一行文字變的更少了，直接計算看看 20 * 6 + 20 * 2 + 20 * 2 = 200px，結論依舊相同，正如 Amos 在 border-box 一開始寫的觀念一樣， width 直接作用在 border-box 上，而非 content-box 上，所以你的 padding 與 border-width 都直接內推了，就這麼簡單！老話一句，如果你還是不理解的話，建議可以看一下免費的「金魚都能懂網頁設計入門 : 換個新盒子」影片教學，裡面的解說跟示範應該可以讓你更容易理解。

曾經聽說過一個都市傳說：「網頁跑版時，只要設定 box-sizing: border-box; 就能搞定了！」其實也頗合理的，因為你整體寬度會變小阿，當然跑版就修正了，但是寬度還是有可能出問題的啦，所以建議還是把基本觀念學好才是王道阿。

這個簡單的屬性，是眾多新手超愛使用的，看似簡單卻沒搞懂的話可會讓版面很不受控阿，幾個小小的重點就請金魚們小心且注意了，金魚都能懂的 CSS 必學屬性，我們下篇見！

「金魚都能懂的CSS選取器」已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧